<script setup>
import { ref, onMounted, reactive, defineExpose } from 'vue'
import { ElForm, ElFormItem, ElInput, ElButton, ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/index' // 引入你的 Pinia 用户状态仓库

// 1. 表单实例（用于验证/重置）
const formRef = ref(null)
// 2. 提交加载状态
const submitLoading = ref(false)
// 3. 表单数据（响应式）
const form = reactive({
  username: '', // 登录名称（从 Pinia 同步）
  nickname: '', // 用户昵称
  email: '', // 用户邮箱
})

// 4. Pinia 状态初始化（同步用户信息到表单）
const userStore = useUserStore()
const isFormReady = ref(false) // 新增渲染开关
const initFormData = () => {
  // 安全赋值：即使 userStore.user 是 undefined，也不影响 form 本身
  const userData = userStore.user || {} // 空对象兜底
  form.username = userData.username || ''
  form.nickname = userData.nickname || ''
  form.email = userData.email || ''
}
// 步骤3：在 onMounted 中等待异步操作，再打开渲染开关
onMounted(async () => {
  // 若 userStore.loadUser 是异步（如接口请求），必须等待完成
  if (userStore.loadUser) {
    await userStore.loadUser() // 等待 Pinia 加载用户数据
  }
  initFormData() // 安全赋值 form
  isFormReady.value = true // 允许表单渲染
})
// 5. 表单校验规则（满足需求：昵称2-10位非空、邮箱非空且格式正确）
const validationRules = reactive({
  nickname: [
    {
      required: true,
      message: '请输入用户昵称',
      trigger: 'blur',
    },
    {
      pattern: /^\S{2,10}$/, // 非空字符，长度2-10
      message: '昵称必须是2-10位的非空字符串',
      trigger: 'blur',
    },
  ],
  email: [
    {
      required: true,
      message: '请输入用户邮箱',
      trigger: 'blur',
    },
    {
      type: 'email', // Element Plus 内置邮箱格式校验
      message: '请输入正确格式的邮箱（如：xxx@xxx.com）',
      trigger: ['blur', 'change'],
    },
  ],
})

// 6. 提交表单逻辑
const handleSubmit = async () => {
  // 表单预验证
  const valid = await formRef.value.validate().catch((err) => {
    console.error('表单校验失败：', err)
    return false
  })
  if (!valid) return

  // 提交加载中
  submitLoading.value = true
  try {
    // 1. 调用 Pinia Action 更新用户信息（或直接调用接口）
    await userStore.updateUserInfo(form) // 假设你有 updateUserInfo 方法
    // 2. 提示成功
    ElMessage.success('基本资料修改成功！')
    // 3. 可选：关闭弹窗/返回上一页（根据你的业务场景）
    // closeDrawer() // 示例：如果在抽屉中使用，可关闭抽屉
  } catch (error) {
    // 错误处理
    ElMessage.error('修改失败：' + (error.message || '服务器异常'))
    console.error('提交失败详情：', error)
  } finally {
    // 关闭加载状态
    submitLoading.value = false
  }
}

// 7. 重置表单逻辑
const handleReset = () => {
  // 重置表单校验状态和数据
  formRef.value.resetFields()
  // 可选：重置为初始数据（从 Pinia 重新同步）
  // initFormData()
}

// 8. 组件挂载时初始化表单数据
onMounted(() => {
  console.log(123)
  initFormData()
})

// 9. 导出组件（如果需要在其他地方引入）
defineExpose({
  initFormData, // 暴露初始化方法，方便父组件调用（如编辑时重新同步数据）
})
</script>
<template>
  <Page-Container title="基本资料">
    <template #default>
      <el-form
        v-if="isFormReady"
        ref="formRef"
        :model="form"
        :rules="validationRules"
        label-width="120px"
        size="large"
        class="user-profile-form"
      >
        <!-- 1. 登录名称（禁用输入） -->
        <el-form-item label="登录名称">
          <el-input
            v-model="form.username"
            disabled
            placeholder="登录账号不可修改"
            class="login-name-input"
          />
        </el-form-item>

        <!-- 2. 用户昵称（带校验） -->
        <el-form-item label="用户昵称" prop="nickname" class="nickname-form-item">
          <el-input
            v-model="form.nickname"
            placeholder="请输入2-10位非空字符"
            maxlength="10"
            show-word-limit
          />
        </el-form-item>

        <!-- 3. 用户邮箱（带校验） -->
        <el-form-item label="用户邮箱" prop="email" class="email-form-item">
          <el-input v-model="form.email" placeholder="请输入正确格式的邮箱" type="email" />
        </el-form-item>

        <!-- 4. 提交按钮 -->
        <el-form-item class="submit-btn-group">
          <el-button type="primary" @click="handleSubmit" :loading="submitLoading">
            提交修改
          </el-button>
          <el-button
            type="default"
            @click="handleReset"
            :disabled="submitLoading"
            style="margin-left: 12px"
          >
            重置
          </el-button>
        </el-form-item>
      </el-form>
      <div v-else class="form-loading">加载用户资料中...</div>
    </template>
  </Page-Container>
</template>
<style scoped lang="scss">
.user-profile-form {
  width: 100%;
  max-width: 600px; // 限制表单最大宽度，优化视觉
  margin: 0 auto;

  .login-name-input {
    background-color: #f5f7fa; // 禁用输入框区分样式
  }

  .nickname-form-item,
  .email-form-item {
    margin-bottom: 20px; // 增加表单项间距，优化视觉
  }

  .submit-btn-group {
    margin-top: 10px;
    text-align: left; // 按钮左对齐（可根据需求改为 center）
  }
}
</style>
